<template>
  <div>
    <h1>post list </h1>
    <ul>
      <li v-for="post in posts" :key="post.id">
        {{post.title}}
      </li>
    </ul>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex' 
export default {
  name: 'postlist',
  metaInfo: {
    title: 'post list'
  },
  computed: {
    ...mapState(['posts'])
  },
  // Vue SSR 特殊为服务端渲染提供一个生命周期钩子函数
  serverPrefetch() {
    // 发起 action, 返回 Promise
    // this.$store.dispatch('getPosts')
    return this.getPosts()
  },
  methods: {
    ...mapActions(['getPosts'])
  }
}
</script>
